<template>
	<view class="myrecord">
		<view class="navigation">
			<image src="/static/images/collage/collage-back.png" class="collage-back" @click="back()" mode=""></image>
			<view class="navigation-title">我的记录</view>
		</view>
		<view class="tab-nav">
			<view class="tab-nav-item" @click="navTab(0)">
				<view :class="[tabIndex==0?'tabActive':'']">我的开团</view>
				<view class="line" v-if="tabIndex==0"></view>
			</view>
			<view class="tab-nav-item" @click="navTab(1)">
					<view :class="[tabIndex==1?'tabActive':'']">我的参团</view>
					<view class="line" v-if="tabIndex==1"></view>
			</view>
		</view>
		
		<view class="my-record-list">
			<view class="record-list-item" v-for="(item,index) in pageItems" :key="index">
				<view class="start-collage-time">开团时间：{{ item.created_at }}</view>
				<view class="collages-goods-list-item" @click="goCollageDetail(item.id)">
					<image :src="item.product.cover_url" class="goods-icon" mode=""></image>
					<view class="collages-goods-list-item-right">
						<view class="goods-describe">{{ item.product.title }}</view>
						<view class="goods-other-lable">
							<image src="/static/images/collage/free-post.png" v-if="item.product.is_sf" class="free-post" mode=""></image>
							<image src="/static/images/collage/product-hangkong.png" v-if="item.product.is_hongkong_direct" class="free-post" mode=""></image>
							<image src="/static/images/collage/product-hangkong.png" v-if="item.product.is_overseas_direct" class="free-post" mode=""></image>
							<image src="/static/images/collage/high-recommend.png" v-if="item.product.is_pop" class="high-recommend" mode=""></image>
						</view>
						<view class="deliver-goods-address"></view>
						<view class="goods-num-info">
							<view class="goods-money">
								<text>￥</text>
								<text>{{ item.product.price_lowest }}</text>
							</view>
							<view class="goods-solded-num">已售{{ item.product.sold_count }}件</view>
						</view>
					</view>
					<view class="record-operation-btn invite-btn" v-if="item.group_status == 'pending'&&tabIndex==0">去邀请</view>
					<view class="record-operation-btn attended-btn" v-if="item.group_status == 'pending'&&tabIndex==1">已参团</view>
					<view class="record-operation-btn invalided-btn" v-if="item.group_status == 'fail'">已失效</view>
					<view class="record-operation-btn receive-red-package-btn" v-if="item.group_status == 'success'&&tabIndex==0" @click.stop="goCollageRedPackage()" >领红包</view>
					<view class="record-operation-btn receive-red-package-btn" v-if="item.group_status == 'success'&&tabIndex==1" >已成团</view>
				</view>
			</view>
		</view>
		<view class="no-more" v-if="pageHasNoMore">
		  --- 没有更多数据了 ---
		</view>
		<image class="return-top" mode="aspectFit" v-if="isTopButtonShow" @click="returnTop" src="/static/images/return-top.png"></image>
	</view>
</template>

<script>
	import { getMyjoinsCollageList,getMyOpensCollageList } from 'api/collageApi'
	import Pagination from "mixins/Pagination"
	export default {
		mixins:[
			Pagination
		],
		data(){	
			return {
				tabIndex:0,
				isTopButtonShow:false
			}
		},
		methods:{
			back(){
				uni.navigateBack({})
			},
			navTab(index){
				this.tabIndex = index;
				this.pageNumber = 1
				this.pageItems = []
				this.pageHasNoMore = false
				this.loadPageData()
			},
			goCollageDetail(id){
				uni.navigateTo({url: '/packs/pages/collageDetail/collageDetail?id=' + id})
			},
			goCollageRedPackage(){
				uni.navigateTo({url: '/packs/pages/collageRedPackage/collageRedPackage'})
			},
			returnTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				})
			},
			async loadPageItems() {
				if(this.tabIndex==1){
					return await getMyjoinsCollageList({page: this.pageNumber})
				}else{
					return await getMyOpensCollageList({page: this.pageNumber})
				}
			}
		},
		async onLoad() {
			await this.loadPageData()
		},
		onPageScroll(e) {
			if (e.scrollTop >= 150) {
				this.isTopButtonShow = true
			} else {
				this.isTopButtonShow = false
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		background: #F6F6F6;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: #F6F6F6;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:999;
	}
	.collage-back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 26rpx;
		left:32rpx;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.tab-nav{
		display: flex;
		justify-content: space-around;
		width: 100%;
		height: 64rpx;
		position: fixed;
		left:0;
		top:100rpx;
		background: #F6F6F6;
		z-index: 999;
		padding: 26rpx 0 10rpx 0;
	}
	.tab-nav-item{
		position: relative;
		>view{
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
			line-height: 36rpx;
		}
		.tabActive{
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			line-height: 36rpx;
		}
	}
	.line{
		width: 48rpx;
		height: 4rpx;
		background: #333333;
		position: absolute;
		left:50%;
		bottom: 0;
		margin-left: -24rpx;
	}
	.record-list-item{
		margin-bottom:48rpx;
	}
	.start-collage-time{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 34rpx;
		text-align: center;
	}
	.my-record-list{
		margin-top: 230rpx;
	}
	.collages-goods-list-item{
		width: 686rpx;
		height: 232rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		margin:16rpx auto 16rpx;
		display: flex;
		position: relative;
		.goods-icon{
			display:block;
			width: 232rpx;
			height: 232rpx;
			border-radius: 32rpx 0px 0px 32rpx;
		}
		.collages-goods-list-item-right{
			margin:16rpx 0 0 24rpx;
		}
		.goods-describe{
			width: 406rpx;
			height: 80rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			line-height: 40rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		.goods-other-lable{
			display: flex;
			height: 30rpx;
			align-items: center;
			margin-top: 4rpx;
		}
		.free-post,.high-recommend{
			display: block;
			width: 102rpx;
			height: 30rpx;
			margin-right: 8rpx;
		}
		.deliver-goods-address{
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			height: 34rpx;
			line-height: 34rpx;
			margin-top: 4rpx;
		}
		.goods-num-info{
			display: flex;
		}
		.goods-money{
			>text:nth-child(1){
				font-size: 24rpx;
				font-weight: 400;
				color: #FF4416;
				line-height: 34rpx;
			}
			>text:nth-child(2){
				font-size: 36rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FF4416;
				line-height: 50rpx;
			}
		}
		.goods-solded-num{
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;
			margin:12rpx 0 0 24rpx;
		}
	}
	.record-operation-btn{
		width: 140rpx;
		height: 52rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		border-radius: 26rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		position: absolute;
		bottom: 12rpx;
		right: 24rpx;
	}
	.invite-btn{
		background: linear-gradient(180deg, #FF77A6 0%, #FF3E42 100%);
	}
	.receive-red-package-btn{
		background: linear-gradient(180deg, #FE7953 0%, #FE3B42 100%);
	}
	.invalided-btn{
		background: linear-gradient(180deg, #E2E2E2 0%, #C2C2C2 100%);
	}
	.attended-btn{
		background: #F0F0F0;
		color:#999999;
	}
	.no-more {
	  width: 100%;
	  font-size: 24rpx;
	  text-align: center;
	  color: #cccccc;
		line-height: 150rpx;
	}
	.return-top {
		width: 96rpx;
		height: 96rpx;
		position: fixed;
		bottom: 150rpx;
		right: 32rpx;
	}
</style>
